<template>
  <el-popover
    v-for="[key, value] in pointList"
    :key="key"
    placement="right"
    :width="300"
    trigger="click"
    popper-class="popper-in"
  >
    <template #reference>
      <bm-overlay
        class="bm-overlay"
        pane="labelPane"
        @draw="draw(key, $event)"
        @click="handleClick(key)"
      >
        <div class="bm-text">{{ value.length }}</div>
      </bm-overlay>
    </template>
    <div>
      <div
        class="h-[54px] border-b border-b-[--autata-line-color] pl-[20px] flex items-center"
      >
        <div class="w-[2px] h-[14px] bg-[--el-color-primary]" />
        <div class="ml-[8px]">{{ t("welcome.store_list") }}</div>
      </div>
      <el-scrollbar class="h-[calc(320px_-_55px)]">
        <div v-for="(item, index) in value" :key="index" class="striped cate">
          {{ index + 1 }}、{{ item.name }}
        </div>
      </el-scrollbar>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { BmOverlay } from "vue-baidu-map-3x";
import { StoreProp } from "@/api/teaInfuser/store";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

interface InProps {
  pointList: [string, Array<StoreProp>][];
}

defineProps<InProps>();
const emit = defineEmits(["overlayClick"]);

const draw = (point, { el, BMap, map }) => {
  const [lng, lat] = point.split("_");
  const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat)); // 返回的坐标为覆盖物的左上角坐标。
  el.style.left = pixel.x - 22 + "px"; // 最终坐标 = 覆盖物坐标 - 覆盖物宽度/2。 // 居中显示
  el.style.top = pixel.y - 22 + "px";
};

const handleClick = (key: string) => {
  const [lng, lat] = key.split("_");
  emit("overlayClick", lng, lat);
};
</script>

<style scoped lang="scss">
$el-color-primary: #1774fa;

.bm-overlay {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--el-color-primary);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 6px 8px 0 #d2d4d7;

  &:hover {
    cursor: pointer;
    background: #1774fa80;
  }

  .bm-text {
    font-size: 16px;
    color: #fff;
  }
}

.striped {
  &:nth-child(2n) {
    background: var(--autata-striped-bg-color);
  }
}

.cate {
  height: 46px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 46px;
  color: var(--autata-font-color);
  transition: all 0.3s;

  /* hover */

  /**
  &:hover {
    color: var(--el-color-primary);
    cursor: pointer;
    background: var(--autata-hover-bg-color);
  }
  */
}
</style>
